<template>
  <div>
    <el-form
      :inline="true"
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      class="form"
    >
      <el-form-item prop="name">
        <el-select
          v-model="dataForm.name"
          class="input"
          placeholder="选择会议室"
          size="medium"
          clearable="clearable"
        >
          <el-option
            v-for="one in roomList"
            :label="one.name"
            :value="one.name"
          />
        </el-select>
      </el-form-item>
      <el-form-item prop="date">
        <el-date-picker
          v-model="dataForm.date"
          type="date"
          placeholder="选择日期"
          class="input"
          size="medium"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button size="medium" type="primary" @click="searchHandle()"
          >查询</el-button
        >
        <el-button size="medium" type="danger" @click="addHandle()"
          >会议申请</el-button
        >
      </el-form-item>
      <el-form-item class="mold">
        <el-radio-group
          v-model="dataForm.mold"
          size="medium"
          @change="changeHandle"
        >
          <el-radio-button label="全部会议"></el-radio-button>
          <el-radio-button label="我的会议"></el-radio-button>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div class="gantt" ref="gantt" v-show="mode == 'gantt'">
      <div class="row">
        <div class="cell-time"></div>
        <div class="cell-time" v-for="one in time">
          <span class="time">{{ one }}</span>
        </div>
      </div>
      <div class="row" v-for="room in gantt.meetingRoom">
        <div class="cell room">{{ room.name }}</div>
        <div class="cell" v-for="one in time">
          <div
            v-if="room.meeting.hasOwnProperty(one)"
            class="meeting"
            :class="room.meeting[one].split('#')[1]"
            :style="
              'width:' +
              room.meeting[one].split('#')[0] * gantt.cellWidth +
              'px'
            "
          ></div>
        </div>
      </div>
    </div>
    <el-pagination
      v-show="mode == 'gantt'"
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50]"
      :page-size="pageSize"
      :total="totalCount"
      layout="total, sizes, prev, pager, next, jumper"
    />

    <div class="calendar" v-show="mode == 'calendar'">
      <!-- 第一行 每一行显示表头文字信息 -->
      <div class="row">
        <div class="cell">时间</div>
        <div class="cell" v-for="one in calendar.days">
          {{ one.date }}（{{ one.day }}）
        </div>
      </div>
      <!-- 接下来的每一行 -->
      <div class="row" v-for="(one, index) in time">
        <div class="cell-time" v-if="time[index + 1] != null">
          {{ one }} ~ {{ time[index + 1] }}
        </div>
        <!-- 一行里的单元格 time 是数组-->
        <div
          class="cell"
          v-for="day in calendar.days"
          v-if="time[index + 1] != null"
        >
          <!-- map.hasOwnProperty 中是否有这个属性,其属性值是一个对象 time是1,2,3等值 用于渲染高度-->
          <div
            class="meeting"
            v-if="calendar.map.hasOwnProperty(`${day.date}#${one}`)"
            :style="
              'height:' +
              calendar.map[day.date + '#' + one].time * 31 +
              'px; line-height:' +
              calendar.map[day.date + '#' + one].time * 31 +
              'px'
            "
            :ref="`${day.date}#${one}`"
            @click="
              infoHandle(
                calendar.map[day.date + '#' + one].id,
                calendar.map[day.date + '#' + one].status
              )
            "
          >
            <!-- 是否显示删除会议的按钮 是否是会议申请人(isCreateor) -->
            <SvgIcon
              name="close"
              class="icon-svg-close"
              v-if="
                calendar.map[`${day.date}#${one}`].isCreator == 'true' &&
                [1, 3].includes(calendar.map[`${day.date}#${one}`].status)
              "
              @click.stop="deleteHandle(`${day.date}#${one}`)"
            />
            {{ calendar.map[`${day.date}#${one}`].title }}
          </div>
        </div>
      </div>
    </div>
    <add v-if="addVisible" ref="add" @refresh="refresh"></add>
    <info v-if="infoVisble" ref="info"></info>
  </div>
</template>

<script>
import SvgIcon from "../components/SvgIcon.vue";
import dayjs from "dayjs";
import Add from "./offline_meeting-add.vue";
import Info from "./offline_meeting-info.vue";
export default {
  components: { SvgIcon, Add, Info },
  data: function () {
    return {
      time: [
        "08:30",
        "09:00",
        "09:30",
        "10:00",
        "10:30",
        "11:00",
        "11:30",
        "12:00",
        "12:30",
        "13:00",
        "13:30",
        "14:00",
        "14:30",
        "15:00",
        "15:30",
        "16:00",
        "16:30",
        "17:00",
        "17:30",
        "18:00",
        "18:30",
      ],
      gantt: {
        meetingRoom: [],
        cellWidth: 0,
      },
      calendar: {
        map: {},
        days: [],
      },
      roomList: [],
      dataForm: {
        name: null,
        date: null,
        mold: "全部会议",
      },
      pageIndex: 1,
      pageSize: 10,
      totalCount: 0,
      dataListLoading: false,
      addVisible: false,
      infoVisble: false,
      dataRule: {},
      mode: "gantt",
    };
  },
  methods: {
    searchHandle: function () {
      let that = this;

      //查询甘特图数据
      if (that.dataForm.name == null || that.dataForm.name == "") {
        that.$refs["dataForm"].validate((valid) => {
          if (valid) {
            that.$refs["dataForm"].clearValidate();
            that.dataForm.name = null;
            if (that.pageIndex != 1) {
              that.pageIndex = 1;
            }
            that.loadDataList();
            that.mode = "gantt";
          } else {
            return false;
          }
        });
      } else {
        that.$refs["dataForm"].validate((valid) => {
          if (valid) {
            that.$refs["dataForm"].clearValidate();
            let data = {
              name: that.dataForm.name,
              mold: that.dataForm.mold,
            };
            //日历控件的值默认为null，有具体日期的日历被清除日期之后，值为空字符串
            if (that.dataForm.date != null && that.dataForm.date != "") {
              data.date = dayjs(that.dataForm.date).format("YYYY-MM-DD");
            }
            that.$http(
              "meeting/searchOfflineMeetingInWeek",
              "POST",
              data,
              true,
              function (resp) {
                let map = {};
                //视图层输出会议卡片做判断遍历数组太麻烦，所以把周日历数据从数组转换成JSON对象
                for (let one of resp.list) {
                  map[`${one.date}#${one.start}`] = one;
                }
                console.log("map", map);
                that.calendar.map = map;
                //周日历表头标题
                that.calendar.days = resp.days;
                that.mode = "calendar";
              }
            );
          } else {
            return false;
          }
        });
      }
    },
    infoHandle: function (id, status) {
      this.infoVisble = true;
      this.$nextTick(() => {
        this.$refs.info.init(id, status);
      });
    },

    sizeChangeHandle: function (val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.loadDataList();
    },
    currentChangeHandle: function (val) {
      this.pageIndex = val;
      this.loadDataList();
    },

    //切换“我的会议”和“全部会议”时候触发事件的回调函数
    changeHandle: function (val) {
      this.searchHandle();
    },
    addHandle: function () {
      this.addVisible = true;
      this.$nextTick(() => {
        this.$refs.add.init();
      });
    },
    refresh: function () {
      this.mode = "gantt";
      this.$refs["dataForm"].resetFields();
      this.loadDataList();
    },
    backHandle: function () {
      let that = this;
      that.mode = "gantt";
    },
    loadDataList: function () {
      let that = this;
      that.dataListLoading = true;
      let data = {
        name: that.dataForm.name,
        mold: that.dataForm.mold,
        page: that.pageIndex,
        length: that.pageSize,
      };
      if (that.dataForm.date == null || that.dataForm.date == "") {
        data.date = dayjs(new Date()).format("YYYY-MM-DD");
      } else {
        data.date = dayjs(that.dataForm.date).format("YYYY-MM-DD");
      }
      that.$http(
        "meeting/searchOfflineMeetingByPage",
        "POST",
        data,
        true,
        function (resp) {
          let page = resp.page;
          let temp = [];
          for (let room of page.list) {
            let json = {};
            json.name = room.name;
            json.meeting = {};
            if (room.hasOwnProperty("meeting")) {
              for (let meeting of room.meeting) {
                let color;
                if (meeting.status == 1) {
                  color = "yellow";
                } else if (meeting.status == 3) {
                  color = "blue";
                } else if (meeting.status == 4) {
                  color = "pink";
                } else if (meeting.status == 5) {
                  color = "gray";
                }
                json.meeting[meeting.start] = meeting.time + "#" + color;
              }
            }
            temp.push(json);
          }
          that.gantt.meetingRoom = temp;
          that.totalCount = page.totalCount;
          that.dataListLoading = false;
        }
      );
    },
    deleteHandle: function (key) {
      let that = this;
      that
        .$confirm("是否删除该会议?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          let json = that.calendar.map[key];
          let data = {
            id: json.id,
            uuid: json.uuid,
            instanceId: json.instanceId,
            reason: "删除会议",
          };
          that.$http(
            "meeting/deleteMeetingApplication",
            "post",
            data,
            true,
            function (resp) {
              if (resp.rows == 1) {
                that.$message({
                  message: "删除成功",
                  type: "success",
                  duration: 1200,
                });
                that.searchHandle();
              } else {
                that.$message({
                  message: "删除失败",
                  type: "error",
                  duration: 1200,
                });
              }
            }
          );
        });
    },
  },
  mounted: function () {
    let that = this;
    //根据实际情况设置甘特图每个单元格应该有的宽度
    let rowWidth = that.$refs["gantt"].offsetWidth - 1;
    let cellWidth = rowWidth * 0.042 + 0.01;
    that.gantt.cellWidth = cellWidth;

    //当浏览器窗口尺寸改变的时候，重新设置甘特图单元格的宽度
    window.addEventListener("resize", () => {
      let rowWidth = that.$refs["gantt"].offsetWidth - 1;
      let cellWidth = rowWidth * 0.042 + 0.01;
      that.gantt.cellWidth = cellWidth;
    });
  },
  created: function () {
    let that = this;
    //加载会议室列表
    that.$http(
      "meeting_room/searchAllMeetingRoom",
      "GET",
      null,
      true,
      function (resp) {
        that.roomList = resp.list;
      }
    );

    //加载分页数据
    that.loadDataList();
  },
};
</script>

<style lang="less" scoped="scoped">
@import url("offline_meeting.less");
</style>
